<template>
  <div class="blank">
    <ComHeader title="评价" leftArrow='true' />
    <div class="comments">
      <div class="goods">
        产品：{{machine.machine_name}}
      </div>
      <div class="rate">
        <rate :length="5" :value="star_level" v-model="star_level" />
      </div>
      <div class="textarea">
        <textarea name="name" placeholder="请输入评价" rows="8" v-model="commentContent"></textarea>
      </div>
      <div class="submit">
        <mt-button @click="clickSubmit()" type="primary">评价</mt-button>
      </div>

    </div>
  </div>
</template>

<script>
import ComHeader from '@/common/ComHeader'
import { Button, Toast } from 'mint-ui';
import api from "@/fetch/api"
  export default {
    name: 'goodsComment',
    data() {
      return {
        machine: this.getlocalStorage('orderMachineDetail'),
        userInfo: this.getlocalStorage(this.companyUnique),
        commentContent: null,
        star_level: 5,
      };
    },
    components: {
        ComHeader,
        Button,
    },
    created() {

    },
    methods: {
      // 提交评论
      clickSubmit() {
        const params = {
          machine_name: this.machine.machine_name,
          machine_code: this.machine.machine_code,
          content: this.commentContent,
          star_level: this.star_level,
          username: this.getUserId(),
          user_nickname: this.userInfo.nickname,
          order_no: this.machine.order_no
        };
        console.log(params)
        api.machineComment(params)
          .catch(res => {
            console.log('data')
            this.print(res);
            Toast('评论成功！')
            setTimeout(()=>{
              this.$router.push('/goods/commentList')
            }, 2000)
          })
      }
    }
  };
</script>

<style lang="stylus" scoped>
.comments{
  padding-top: 1.45rem;
  .textarea{
    width: 90%;
    margin: 0.6rem auto;
    textarea{
      width: 98%;
      padding: .4rem;
      border: 1px solid #ddd;
      border-radius: .2rem;
    }
  }
  .submit{
    width: 89%;
    margin: 0 auto;
    button{
      width: 100%;
    }
  }
  .goods{
    padding-top: .4rem;
    padding-left: .6rem;
  }
  .rate{
    padding-left: .6rem;
    padding-top: .4rem;
  }
}
</style>
